<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				padding: 0;
				margin: 0;
				list-style: none;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="1" cellpadding="1">
			<tr>
				<th><input id="allChckbox" type="checkbox" />全选</th>
				<th>标题</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>

			</tr>
			<tr>
				<td><input type="checkbox" class="shopChck" onclick="oneChck(this)"/></td>
				<td>测试商品</td>
				<td>200</td>
				<td>
					<button type="button" onclick="addCount(this)">加</button>
					<input type="text" value="1" min="1" onblur="itemBlur(this)" />
					<button type="button" onclick="substa(this)">减</button>
				</td>
				<td>200</td>
				<td>
					<button type="button">删除</button>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="shopChck" onclick="oneChck(this)" /></td>
				<td>测试商品</td>
				<td>250</td>
				<td>
					<button type="button" onclick="addCount(this)">加</button>
					<input type="text" value="1" min="1" onblur="itemBlur(this)" />
					<button type="button" onclick="substa(this)">减</button>
				</td>
				<td>250</td>
				<td>
					<button type="button">删除</button>
				</td>
			</tr>
		</table>
		<ul>
			<li>共<span id="shopCount">0</span>件商品</li>
			<li>已选择<span id="chckboxCount">0</span>件</li>
			<li>合计：<span id="totalPrice">0</span>元</li>
		</ul>
		<script type="text/javascript">
			var shopCount = document.getElementById("shopCount").innerHTML //商品的数量
			var chckboxCount =document.getElementById("chckboxCount").innerHTML //已选择
			var totalPrice = document.getElementById("totalPrice") //合计
			
			var allChckbox = document.getElementById("allChckbox") //全选
			var shopChck = document.getElementsByClassName("shopChck") //单选
			
			//点击全选
			allChckbox.onclick = function (){
				for (var i = 0; i < shopChck.length; i++) {
					shopChck[i].checked = allChckbox.checked
				}
				countTotal()
			}
			//商品的增加
			function addCount(el) {
				let TagTd = el.parentNode.parentNode.getElementsByTagName("td")
				let shopCount = el.parentNode.getElementsByTagName("input")[0]
				shopCount.value++
				TagTd[4].innerText = parseInt(TagTd[2].innerHTML) * parseInt(shopCount.value)
				countTotal()
			}
			//商品减少
			function substa(el) {
				let TagTd = el.parentNode.parentNode.getElementsByTagName("td")
				let shopCount = el.parentNode.getElementsByTagName("input")[0]
				if(shopCount.value<=1){
					alert("没法减了")
				}else{
					shopCount.value--
				}
				TagTd[4].innerText = parseInt(TagTd[2].innerHTML) * parseInt(shopCount.value)
				countTotal()
			}
			//单选
			function oneChck(el){
				countTotal()
			}
			//input失去焦点
			function itemBlur(el){
				let TagTd = el.parentNode.parentNode.getElementsByTagName("td")
				let shopCount = el.parentNode.getElementsByTagName("input")[0]
				TagTd[4].innerText = parseInt(TagTd[2].innerHTML) * parseInt(shopCount.value)
				countTotal()
			}
			//计算合计
			function countTotal(){
				var total =0
				for (var i = 0; i < shopChck.length; i++) {
					if(shopChck[i].checked){
						let price = shopChck[i].parentNode.parentNode.getElementsByTagName("td")[2].innerHTML
						let num = shopChck[i].parentNode.parentNode.getElementsByTagName("td")[3].getElementsByTagName("input")[0].value
						total += parseInt(price) * parseInt(num)
					}
					}
				totalPrice.innerText = total
			}
		</script>
	</body>
</html>
